<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>课程信息修改</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td style="width: 200px;" align="right">
          <span>课程编号：</span>
        </td>
        <td style="width: 600px;">
          <el-input v-model="courseDetails.course_id" disabled></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>课程名称：</span>
        </td>
        <td>
          <el-input v-model="courseDetails.course_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>开课学院：</span>
        </td>
        <td>
          <el-input v-model="courseDetails.institute_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>教学班级：</span>
        </td>
        <td>
          <el-input v-model="courseDetails.class_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>排课人数：</span>
        </td>
        <td>
          <el-input style="width: 150px" v-model="courseDetails.arrangeNumber"></el-input>
          <span>上课人数：</span>
          <el-input style="width: 150px" v-model="courseDetails.attendanceNumber"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>授课教师：</span>
        </td>
        <td>
          <el-input v-model="courseDetails.teacher_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>授课地点：</span>
        </td>
        <td>
          <el-input v-model="courseDetails.place"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>上课星期：</span>
        </td>
        <td align="left">
          <el-input style="width: 150px" v-model="courseDetails.week"></el-input>
          <span>上课节次：</span>
          <el-input style="width: 150px" v-model="courseDetails.sectionTime"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>课时：</span>
        </td>
        <td align="left">
          <el-input v-model="courseDetails.classPeriod"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>课程描述：</span>
        </td>
        <td>
          <el-input type="textarea" size="medium" v-model="courseDetails.description"></el-input>
        </td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="update_lessonSchedule">确认</el-button>
          <el-button type="primary">还原</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Update",
  props: {
    courseDetails: Object //父组件传过来的课程表详情
  },
  data() {
    return {};
  },
  methods: {
    //返回
    back() {
      this.$emit("showUpdate", false);
    },
    //修改课程信息
    update_lessonSchedule() {
      this.$alert("修改课程", "修改成功", {
        confirmButtonText: "确定",
        callback: action => {
          //打印修改后的数据
          console.log(this.courseDetails);
          //修改成功，返回页面
          this.$emit("showUpdate", false);
        }
      });
    }
  }
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
